<template>
  <div class="app-container action-h5-container">
    <div class="back-content flex-between">
      <div class="back-main flex-normal">
        <span class="back-icon el-icon-back" @click="$router.go(-1)"></span>
        <span class="back-label">活动页面配置</span>
      </div>
      <el-button type="primary" size="small" @click="submit" :loading="boo.isSubmit">提交</el-button>
    </div>
    <template v-if="boo.isFlash">
      <active-poster ref="posterRef" :active-id="id"/>
    </template>
    <div class="action-active-main ">
      <phone-h5-layout ref="h5-layout"></phone-h5-layout>
    </div>
  </div>
</template>

<script>
import {setH5Config} from '@/api/activeManage/active.js'
import { mapActions } from 'vuex'
export default {
  name: "storeActionActive",
  components: {
    'phone-h5-layout': () => import('@/formgen/layout/index.vue'),
    'active-poster': () => import('@/rhComponents/active-poster/index.vue')
  },
  data() {
    return {
      id: '',
      boo: {
        isSubmit: false,
        isFlash: false
      }
    };
  },
  mounted(){
    let _self = this
    let {id = ''} = _self.$route.params
    this.id = id    
    this.setActivity(id)
  },
  methods: {
    ...mapActions(['setActivity', 'setdrawingH5']),
    async submit(){
      let _self = this, {id} = this.$route.params
      let vm = _self.$refs['h5-layout']
      let { drawingList, pageConf } = vm
      if(!drawingList.length) return _self.$message.error('请配置页面模块')
      let params = {
        "activityId": id,
        "backgroundImg": pageConf.backgroundImg,
        "background": pageConf.background,
        "pageTitle": pageConf.pageTitle,
        "pageDescribe": pageConf.pageDescribe,
        "modelName": pageConf.modelName || '', 
        "modelClass": pageConf.modelClass || '', 
        "draw": drawingList
      }
      _self.boo.isSubmit = true
      _self.boo.isFlash = false
      await _self.setdrawingH5(params)
      _self.boo.isFlash = true
      setTimeout(() => {
        _self.$nextTick(() => {
          let vmPoster = _self.$refs['posterRef']
          vmPoster.createPoster().then(async res => {
            params.firstScreenImg = res.url
            await setH5Config(JSON.parse(JSON.stringify(params))).then(res => {
              _self.$message.success('操作成功')
            })
            _self.boo.isSubmit = false
          }).finally(() => {
            _self.boo.isSubmit = false
          })
        })
      }, 1000)
      
      
    },
  }
};
</script>
<style scoped lang="scss">
.back-content{
  padding: vh(25) vw(20) vh(25) 0;
  .back-icon{
    font-size: vh(36);
    cursor: pointer;
  }
  .back-label{
    margin-left: vw(20);
    font-size: 13px;
    color: #3D3D3D;
  }
}
.action-h5-container{
  display: flex;
  flex-direction: column;
  padding-left: vw(20);
  // height: calc(100vh - 140px);
  .action-active-main{
    align-items: flex-start;
    // width: 70%;
  }
}
</style>